<template>

  <div style="height: 100%">
  <el-container style="height: 100%">
    <el-aside width="200px">
      <Menu></Menu>
    </el-aside>
    <el-container>
      <el-header style="width: 600px;margin-left: 20%">
          <el-input
          style="width: 400px"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input"
          @change="change_search"
          >
          </el-input>
      </el-header>
      <el-main style="font-size:50px ">
      <el-table
          :data="pro_table_date"
          style="min-width: 100%;min-height:100%;overflow-y: auto;width: 1000px;"
          :row-class-name="tableRowClassName">
        <el-table-column
            prop="id"
            label="id"
            width="250"
            >
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="创建日期"
            width="250"
            >
          </el-table-column>
           <el-table-column
            prop="name"
            label="项目名称"
            width="300">
          </el-table-column>
          <el-table-column
            prop="creater"
            label="创建人"
            width="300">
          </el-table-column>
          <el-table-column
            prop="des"
            label="详细内容">
          </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                  <router-link :to="'/Project_list_All?pro_ject_id='+scope.row.id">
                <el-button
                    size="mini"
                    type="primary">Edit</el-button>
                    </router-link>
                   &#12288
                  <el-button
                    size="mini"
                    @click="Delete_pro_ject(scope.row.id )"
                    type="danger" icon="el-icon-delete" circle></el-button>
                </template>
          </el-table-column>
                 <el-table-column>
                   <template slot="header">
                     <el-button type="primary" @click="add_project">
                            新增项目
                     </el-button>
                   </template>
                 </el-table-column>
  </el-table>
      </el-main>
    </el-container>
  </el-container>
  </div>

</template>

<script>
    import Menu from '../components/Menu.vue'
    import axios from 'axios'
  export default {

    name: "Project_list",
    //  参数 变量数据初始化
    data() {
      return {
        input: '',
        pro_table_date: [{'id':1}],
      }
    },
    mounted() {
      axios.get('http://localhost:8000/get_DATE/').then(res => {
        this.pro_table_date = res.data
      })
    },

    //搜索函数
    methods: {
      change_search() {
        axios.get('http://localhost:8000/get_DATE/', {
          params: {input: this.input}
        }).then(res => {
          this.pro_table_date = res.data
        })
      },
      Delete_pro_ject(pro_ject_id) {
        axios.get('http://localhost:8000/delete_pro_ject/', {
          params: {
            pro_ject_id: pro_ject_id

          }
        }).then(res => {
          this.pro_table_date = res.data
        })
      },
      add_project() {
        axios.get('http://localhost:8000/add_project/').then(res => {
          this.pro_table_date = res.data
        })

      },
    },
    //  挂载页面
    components: {
      Menu,
    },
  }
  </script>
<style>

    .el-table .warning-row {
        background: #d0ab5c;
      }

      .el-table .success-row {
        background: #5d943d;
      }

    .el-header{
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
      }
    .el-asides {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
</style>